<template>
    <div class="wdp-4">
        <div v-for="flowCommentGroup in flowCommentList" :key="flowCommentGroup.id">
            <van-cell-group class="wdp-4-1">
                <van-cell>
                    <h3>{{flowCommentGroup.taskName}}</h3>
                </van-cell>
            </van-cell-group>

            <ul class="timeline">
                <li class="timeline-item" v-for="flowComment in flowCommentGroup.children" :key="flowComment.id">
                    <div class="item-box">
                        <i></i>
                        <h3><span>{{flowComment.operationTypeString}}</span></h3>
                        <img src="../../../assets/image/user-images.jpg" width="60" height="60">
                        <h4>{{flowComment.userName}}<span v-if="flowComment.deptName">/{{flowComment.deptName}}</span>
                        </h4>
                        <p>{{flowComment.endTime}}</p>
                        <p><span>{{flowComment.message}}</span></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'bpmHistList',
        props: {
            flowCommentList: Array,
        },
    }
</script>
